<template>
  <div id="register">
    <div id="header">
      <x-header slot="header" :left-options="{backText: ''}" style="width:100%;position:absolute;left:0;top:0;z-index:100;" title="注册">
        <a href="./#/racelist" style="font-size:24px" slot="right">
          <i class="fa fa-home fa-fw"></i>
        </a>
      </x-header>
    </div>

    <group style="padding-top:30px">
      <x-input v-model="tel" placeholder='手机号码' :is-type="isTel"></x-input>
      <x-input placeholder="请填写验证码" v-model="code" class="weui-vcode">
        <x-button :disabled='clock' slot="right" type="primary" @click.native="countDown" mini>{{codeMessage}}
        </x-button>
      </x-input>
      <x-input v-model="psword" type='password' placeholder='密码'></x-input>
      <x-input v-model="psword2" type='password' placeholder='确认密码'></x-input>
    </group>

    <group style="position: relative;top:-20px">

      <div style="text-align:center;line-height:3;margin-top:0;">
        <div style="padding-left:15px;padding-right:15px;padding-top:15px;margin-top:0">
          <flexbox>

            <flexbox-item>
              <x-button type='primary' :disabled="isreg" @click.native="reg">注册</x-button>
            </flexbox-item>

          </flexbox>

        </div>

        <a href="./#/login">
          <<返回登录</a>

      </div>

    </group>
    <myFooter></myFooter>

  </div>
</template>


<script type="text/ecmascript-6">
/* eslint-disable*/
const countTime = 60; //倒数计时60秒
//let host = "http://jiangtao.v3.ihuipao.com/";

import Myheader from "@/common/components/myheader.vue";
import myFooter from "@/common/components/myfooter.vue";
import { cookie } from "vux";
import mixin from "@/common/js/mixin";

import {
  XHeader,
  Flexbox,
  FlexboxItem,
  debounce,
  XInput,
  Group,
  XButton,
  Grid,
  GridItem,
  FormPreview,
  Cell,
  LoadMore,
  Actionsheet,
  Toast,
  Confirm,
  TransferDomDirective as TransferDom
} from "vux";
//axios
import qs from "qs";
import { axios } from "@/api/axios.js";
import { indexedDB } from "@/api/indexedDB.js";

import { isIdNumber, isTel, setTitle } from "@/common/js/main.js";

export default {
  mixins: [mixin],
  props: ["page", "host"],
  data() {
    return {
      tel: "", //注册手机号码
      code: "", //验证码
      clock: false, //验证码状态锁
      codeMessage: "发送验证码", //验证码倒数数字
      psword: "",
      psword2: "",
      isTel: function(value) {
        return {
          valid: isTel(value),
          msg: "请输入正确的手机号码"
        };
      }
    };
  },
  computed: {
    isreg: function() {
      if (
        isTel(this.tel) &&
        this.code != "" &&
        this.psword != "" &&
        this.psword2 != ""
      ) {
        return false;
      } else {
        return true;
      }
    }
  },
  beforeCreate() {
    setTitle("注册");
  },
  created() {},
  methods: {
    sendCode() {
      this.axios
        .post(
          `${host}user/sms/send`,
          qs.stringify({
            mobile: this.tel,
            type: "reg"
          })
        )
        .then(response => {
          if (response.data.code == "200") {
            this.$vux.toast.show({
              type: "success",
              text: "验证码发送成功"
            });
          }
        });
    },
    reg() {
      if (this.psword != this.psword2) {
        this.$vux.toast.show({
          type: "success",
          text: "两次输入的密码不一致"
        });
        return;
      }

      this.axios
        .post(
          `${host}user/reg`,
          qs.stringify({
            username: this.tel,
            verify: this.code,
            passwd: this.psword
          })
        )
        .then(response => {
          if (response.data.code == "200") {
            this.$vux.toast.show({
              type: "success",
              text: "注册成功"
            });
          } else {
            this.$vux.toast.show({
              type: "warn",
              text: response.data.msg,
              onHide() {}
            });
          }
        });
    },
    countDown() {
      if (this.clock) {
        return;
      }
      if (this.indexNumber == "") {
        return;
      }
      if (!isTel(this.tel)) {
        this.$vux.toast.show({
          type: "warn",
          text: "请输入正确的手机号码"
        });
        return;
      }

      this.sendCode();
      this.clock = true;
      let _this = this;
      this.codeMessage = countTime;
      let countDown = setInterval(function() {
        //console.log(_this.codeMessage)
        if (_this.codeMessage <= 1) {
          _this.codeMessage = "发送验证码";
          _this.clock = false;
          clearInterval(countDown);
          return;
        }
        _this.codeMessage--;
      }, 1000);
    }
  },
  directives: {
    TransferDom
  },
  components: {
    XHeader,
    Myheader,
    myFooter,
    Flexbox,
    FlexboxItem,
    debounce,
    XInput,
    Group,
    XButton,
    Grid,
    GridItem,
    FormPreview,
    Cell,
    LoadMore,
    Actionsheet,
    Toast,
    Myheader,
    Confirm
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" rel="stylesheet/less">
html,
body {
  height: 100%;
  width: 100%;
}

.vux-x-dialog .vux-x-input input {
  border: 1px solid #ccc;
  width: 110px;
}

#app .footerBanner {
  position: static;
}
</style>






